{include file="public/header"}
<body>
<script src="/static/global/drag/Sortable.min.js"></script>
<script src="/static/global/drag/vuedraggable.umd.min.js"></script>
<div id="app" v-cloak>
    <div class="ht-main">
        <div class="ht-search">
            <el-form :inline="true" size="small">
                <el-form-item label="编号">
                    <el-input type="text" placeholder="编号" v-model="searchKey.no"></el-input>
                </el-form-item>
                <el-form-item label="领料时间">
                    <el-date-picker
                            v-model="searchKey.create_time"
                            type="daterange" format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button type="" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="ht-tool">
            <div class="ht-tool-left">
               <el-button type="success" size="mini" icon="el-icon-plus" @click="doAdd">添加</el-button>
               <el-button type="primary" :disabled="tableSelect.length !== 1" size="mini" icon="el-icon-edit"
                          @click="edit(tableSelect[0])">编辑
               </el-button>
                <el-button type="danger" :disabled="!tableSelect.length" size="mini" icon="el-icon-delete"
                           @click="batchDel('/admin/partslog/del')">删除
                </el-button>
            </div>
            <div class="ht-tool-right">
            </div>
        </div>
        <div class="ht-main-body">
            <el-table :data="tableData" border header-row-class-name="ht-table-header"
                      ref="dataTable" @selection-change="handleSelectChange" row-key="title"
            >
                <el-table-column align="center" type="selection" width="39"></el-table-column>
                <el-table-column align="center" width="100px" prop="id" label="ID"></el-table-column>
                <el-table-column align="center" prop="no" label="领料编号"></el-table-column>
                <el-table-column align="center" prop="title" label="领料明细">
                    <template slot-scope="scope">
                        <el-tag type="primary" size="mini" @click="showInfo(scope.row)" style="cursor: pointer">查看</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="all_count" label="领料数量"></el-table-column>
                <el-table-column align="center" prop="all_cate" label="领料种类"></el-table-column>
                <el-table-column align="center" prop="all_money" label="领料金额"></el-table-column>
                <el-table-column align="center" prop="bz" label="备注"></el-table-column>
                <el-table-column align="center" prop="name" label="领料人"></el-table-column>
                <el-table-column align="center" prop="leader_name" label="领料主管"></el-table-column>
                <el-table-column align="center" prop="use_unit" label="单位负责人"></el-table-column>
                <el-table-column align="center" prop="store_name" label="库管员"></el-table-column>
                <el-table-column align="center" prop="status_name" label="状态"></el-table-column>
                <el-table-column align="center" width="120" prop="create_time" label="领料时间"></el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="290">
                    <template slot-scope="scope">
                        <el-button @click="printer(scope.row)" size="mini" type="primary">打印</el-button>
                        <el-button @click="setIn(scope.row)" v-if="scope.row.status == -1" size="mini" type="primary">确认领料</el-button>
                        <el-button @click="edit(scope.row)" v-if="scope.row.status == -1" size="mini" type="primary" icon="el-icon-edit"></el-button>
                        <el-button @click="del(scope.row)" size="mini" type="danger" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="ht-main-page">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[1,10, 200, 300, 400]"
                        :page-size="limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <el-drawer
                    :visible.sync="is_edit"
                    size="100%"
                    :with-header="false"
                    custom-class="ht-drawer-bg"
                    :append-to-body="true"
                    :destroy-on-close="true"
            >
                <div class="ht-drawer-main">
                    <el-page-header @back="goBack" title="Esc返回" :content="content"></el-page-header>
                    <div class="ht-form">
                        <el-form :model="editData" label-width="120px" size="small">
                            <el-form-item label="领料编号">
                                <el-input placeholder="领料编号" v-model="editData.no"></el-input>
                            </el-form-item>
                            <el-form-item label="领料单位">
                                <el-input placeholder="领料单位" v-model="editData.use_unit"></el-input>
                            </el-form-item>
                            <el-form-item label="选择配件">
                                <el-button type="primary" size="mini" @click="selectParts">添加</el-button>
                                <el-table :data="editData.parts_info" border header-row-class-name="ht-table-header" size="mini"
                                          ref="dataTable"
                                >
                                    <el-table-column align="center" width="120px" prop="id" label="">
                                        <template slot-scope="scope">
                                            <el-button type="danger" size="mini" icon="el-icon-delete" @click="delParts(scope.$index)"></el-button>
                                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="editParts(scope.$index)"></el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" width="100px" prop="id" label="序号">
                                        <template slot-scope="scope">
                                            {{scope.$index+1}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" prop="title" label="配件名称"></el-table-column>
                                    <el-table-column align="center" prop="num" label="数量"></el-table-column>
                                    <el-table-column align="center" prop="price" label="价格"></el-table-column>
                                    <el-table-column align="center" prop="unit" label="单位"></el-table-column>
                                    <el-table-column align="center" prop="item" label="规格/型号"></el-table-column>
                                    <el-table-column align="center" prop="item" label="共计">
                                        <template slot-scope="scope">
                                            {{ (Number(scope.row.num) * Number(scope.row.price)).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" prop="bz" label="备注"></el-table-column>
                                </el-table>
                            </el-form-item>
                            
                            <el-form-item label="领料人">
                                <el-input placeholder="领料人" v-model="editData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="领料主管">
                                <el-input placeholder="领料主管" v-model="editData.leader_name"></el-input>
                            </el-form-item>
                            <el-form-item label="单位负责人">
                                <el-input placeholder="单位负责人" v-model="editData.unit_name"></el-input>
                            </el-form-item>
                            <el-form-item label="库管人员">
                                <el-input placeholder="库管人员" v-model="editData.store_name"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input placeholder="备注" type="textarea" v-model="editData.bz"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="goBack">取消</el-button>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-drawer>
        </div>
        <el-dialog title="详情" :visible.sync="showDialog">
            <el-table :data="gridData" border header-row-class-name="ht-table-header">
                <el-table-column property="date" label="序号" width="150">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column property="title" label="配件名称" width="200"></el-table-column>
                <el-table-column property="item" label="规格/型号"></el-table-column>
                <el-table-column property="num" label="数量"></el-table-column>
                <el-table-column property="price" label="单价"></el-table-column>
                <el-table-column property="money" label="共计">
                    <template slot-scope="scope">
                        {{ Number(scope.row.num) * Number(scope.row.price) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
    <ht-parts :show.sync="partsShow"  :item-data="itemData" @success="partsSuccess"></ht-parts>
</div>
{include file="public/common"}
<script src="/static/elementUi/component/parts.js"></script>

<script>
    let vs ;
    let del_url = "{:url('partslog/del')}";
    let add_url = "{:url('partslog/add')}";
    let index_url = "{:url('partslog/index')}";
    var vm = new Vue({
        el: "#app",
        data: function () {
            return {
                showDialog: false,
                arctypeList: [],
                activeTab: 'first',
                tableData: [],
                is_edit: false,
                editData: {
                    parts_info:[]
                },
                editDataTemp: {},
                content: '编辑',
                total: 0,
                page: 1,
                limit: 10,
                partsShow:false,
                fileManage:false,
                itemData: {},
                parts_list:[],
                gridData:[]
            }
        },
        created: function () {
            vs = this;
            this.getData()
            vs.getParts()
        },
        methods: {
            printer(row) {
                window.open('/admin/order.printer.printer/print9.html?id='+row.id,'_blank')
            },
            editParts(index) {
                vs.partsShow = true;
                vs.itemData = vs.editData.parts_info[index]
            },
            partsSuccess(data) {
                if (!vs.editData.parts_info) vs.editData.parts_info = []
                let index = vs.editData.parts_info.findIndex(item => item.id === data.id)
                if (index !== -1) {
                    vs.editData.parts_info.splice(index,1,data)
                } else {
                    vs.editData.parts_info.push(data)
                }
                vs.$forceUpdate()
            },
            showInfo(row) {
                vs.gridData = JSON.parse(JSON.stringify(row.parts_info))
                vs.showDialog = true
            },
            getIsDisabled(id) {
                return vs.editData.parts_info.findIndex(item => item.id === id) > -1
            },
            changeParts(id,index) {
                console.log(id,index)
                let parts_index = vs.parts_list.findIndex(item => item.id === id)
                vs.$set(vs.editData.parts_info,index,vs.parts_list[parts_index])
            },
            delParts(index) {
                vs.editData.parts_info.splice(index,1)
            },
            selectParts() {
                vs.itemData = {}
                vs.partsShow =  true
            },
            getParts() {
                Api.request("{:url('parts.parts/all')}").then(res=>{
                    this.parts_list = res.data
                    this.parts_list.map(item=>{
                        item.id = item.id+""
                    })
                })
            },
            setIn(row) {
                vs.confirm('确定领料',()=>{
                    Api.request("{:url('partslog/setIn')}",{id:row.id}).then(res=>{
                        vs.getData()
                    })
                })
            },
            handleRemove(item,index) {
                vs.editData.images.splice(index,1)
                console.log(vs.editData.images)
                vs.$forceUpdate()
            },
            imageManageClose(path) {
                this.showDialog = false;
            },
            imageSubmit(path) {
                console.log("path", path)
                vs.editData.image = path[0]
                vs.showDialog = false;
            },
            imageManage() {
                this.showDialog = true;
            },
            uploadSuccess(litpic, value) {
                this.editDataTemp.litpic = litpic
                this.editData.litpic = litpic
            },
            changeStatus(e,id) {
                Api.request("{:url('diggings/setStatus')}", {id:id}).then((res)=>{
                    if (res.data.code == 1) {
                        this.$message({
                            message:'操作成功',
                            type:'success',
                            duration:1000,
                        })
                    } else {
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1500,
                            onClose:function (){
                                location.reload()
                            }
                        })
                    }
                })
            },
            onSubmit() {
                var that = this
                $.post(add_url, that.editData, function (res) {
                    if (res.code == 1) {
                        that.showSuccessMsgCall(function () {
                            that.is_edit = false;
                            that.showDialog = false;
                            that.editData = {};
                            that.getData()
                        })
                    } else {
                        that.showErrorMsg(res.msg)
                    }
                })
            },
            getData: function () {
                var that = this
                that.searchType = {
                    no: 'like',
                    create_time:'between time'
                };
                $.post(index_url, {
                    limit: that.limit,
                    page: that.page,
                    search_key: that.searchKey,
                    search_type: that.searchType
                }, function (res) {
                    if (res.code == 1) {
                        that.tableData = res.data.data
                        that.total = res.data.total
                    } else {
                        that.showErrorMsg(res.msg)
                    }
                })
            },
            doAdd: function () {
                this.is_edit = true
                this.content = '添加'
                this.editData = {parts_info:[]}
            },
            edit: function (data) {
                this.is_edit = true
                this.content = '编辑'
                this.editData = data

                console.log(data)
            },
            goBack: function () {
                this.is_edit = false
            },
            del: function (data) {
                var that = this
                that.$confirm('确定删除么?', '提示', {
                    type: 'warning',
                    lockScroll: false
                }).then(() => {
                    $.post(del_url, {id: data.id}, function (res) {
                        if (res.code == 1) {
                            that.showSuccessMsgCall(function () {
                                that.getData()
                            })
                        } else {
                            that.showErrorMsg(res.msg)
                        }
                    })
                })
            },
            handleSizeChange: function (e) {
                this.limit = e
            },
            handleCurrentChange: function (e) {
                this.page = e
            }
        },
        watch: {
            page(v) {
                this.getData()
            },
            limit() {
                this.getData()
            }
        }
    })
</script>
</body>
</html>
